<script setup>
import { ref } from 'vue'
import expdata from '../../data/GunWeaponExpData.json'
import jsonToMap from '../../j2m.js'

const expData = jsonToMap(expdata.data)
const exps = []
for (let l = 61; --l > 1;) {
  exps.unshift(expData.get(l*100+3)[5])
}
const currentLv = ref(1)
const targetLv = ref(60)
const add = (a, b) => a + b
</script>

<template>
  <form>
    <fieldset>
      <legend>当前</legend>
      <label for="currentLv">当前熟练度</label>
      <input id="currentLv" type="number" v-model="currentLv" min="1" :max="targetLv - 1">
    </fieldset>
    <fieldset>
      <legend>目标</legend>
      <label for="targetLv">目标熟练度</label>
      <input id="targetLv" type="number" v-model="targetLv" min="2" max="60">
    </fieldset>
    <fieldset>
      <legend>提升消耗解析图纸</legend>
      <output>{{ currentLv < targetLv ? exps.slice(currentLv - 1, targetLv - 1).reduce(add) : '当前熟练度需小于目标熟练度' }}</output>
    </fieldset>
  </form>
  <table>
    <tr>
      <th>熟练度</th>
      <th>提升消耗</th>
      <th>累计消耗</th>
    </tr>
    <tr v-for="(exp, lv) in exps">
      <td>{{ lv + 1 }}</td>
      <td>{{ exp }}</td>
      <td>{{ lv ? exps.slice(0, lv).reduce(add) : '-' }}</td>
    </tr>
    <tr>
      <td>60</td>
      <td>-</td>
      <td>{{ exps.reduce(add) }}</td>
    </tr>
  </table>
</template>

<style scoped>
input {
  margin: 0 0.5em 0 0.25em;
}
</style>
